<template>
  <h1>循环指令</h1>
  <ul>
    <!-- 从1开始遍历，一直到数字5，没循环一次，item++   -->
    <li v-for="item in 5">{{ item }}</li>
    <!-- 循环比遍历数组，item就是本轮循环遍历到的元素   -->
    <li v-for="item in arr">{{ item }}</li>
  </ul>

  <table border="1px">
    <caption>商品列表</caption>
    <thead>
    <tr>
      <th>商品编号</th>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品库存</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>

    <tr v-for="(item,index) in productArr">
      <td>{{ index + 1 }}</td>
      <td>{{ item.title }}</td>
      <td>{{ item.price }}</td>
      <td>{{ item.count }}</td>
      <td>
        <button @click="del(index)">删除</button>
      </td>
    </tr>
    </tbody>
  </table>
</template>

<script setup>
import {ref} from "vue";

const arr = ref(['张三', '李四', '王五'])

const productArr = ref([
  {title: '华为手机', price: 1999, count: 100},
  {title: '小米14', price: 9999, count: 2100},
  {title: '苹果16', price: 19999, count: 1200},
  {title: '魅族', price: 19919, count: 111100}
]);

const del = (i) => {
  if (confirm('确定删除吗？')) {
    // splice删除指定下标对应的元素，删除的个数
    productArr.value.splice(i, 1)
  }
};

</script>

<style scoped>

</style>